import React, {
    Alert,
    AppRegistry,
    Component,
    Dimensions,
    Image,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from 'react-native';

class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: "Helo input",
            movies: null,
            p: props
        }; // this.state
        this.user_profile = {
            first_name: "",
            last_name: ""
        };
        this.user_credentials = {
            user_id: "",
            user_password: ""
        };
        
        // Bind local functions
        //this.onPressButton = this.onPressButton.bind(this);
        //this._setState = this._setState.bind(this);
    }

    setPressButton() {
        console.log("in setPressButton");
        console.log("in onPressButton; user_id: " + this.user_credentials.user_id + ", user_password: " + this.user_credentials.user_password);
        
        var fetchPromise = fetch('http://192.168.1.81:3000/api/v1/authenticate', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                user_id: this.user_credentials.user_id,
                password: this.user_credentials.user_password,
            })
        });
        
        fetchPromise
        .then((response) => response.json())
        .then((pj) => {
            console.log(pj.result_code);
            console.log(pj.result);
            console.log(pj.cred_code);
        })
        .catch((error) => {
            console.warn(error);
        });
        
        // Sample code if response is not in JSON format
        // fetchPromise
        // .then((response) => response.text())
        // .then((responseText) => {
        //     console.log("[" + responseText + "]");
        // })
        // .catch((error) => {
        //     console.warn(error);
        // });
        
    }

    // _saveUserId(a, b, c, d) {
    //   //Alert.alert('Deb', 'in _saveUserId',);
    //   console.log("in _saveUserId");
    //   console.log("a" + a);
    //   console.log("b" + b);
    //   //this.refs.password_textinput.focus(); 
    // }

    componentDidMount() {
        //this.fetchData();
    }

    setUserId(t) {
        console.log("setUserId: " + t);
        this.user_credentials.user_id = t;
    }
    setUserPassword(t) {
        console.log("setUserPassword: " + t);
        this.user_credentials.user_password = t;
    }

    render() {
        return (
            <View style={styles.container}>
                <Image source={require('./img/splash.png') } style={styles.container}>
                    <Text style={styles.welcome}>
                        Project Radar
                    </Text>
                    <Text style={styles.instructions}>
                        A project tracking application
                    </Text>
                    <Text style={styles.instructions}>
                        Enter your user id and password to login
                        {"\n"}
                        Width {Dimensions.get('window').width} x Height {Dimensions.get('window').height}
                    </Text>
                    <TextInput ref="user_id_textinput" placeholder="User Id" defaultValue="" placeholderTextColor="lightgoldenrodyellow" autoCorrect={false}
                        maxLength={16} style={styles.text_center} onEndEditing={this._saveUserId} onChangeText={(text) => this.setUserId(text) }  />
                    <TextInput ref="password_textinput" placeholder="Password" defaultValue="" placeholderTextColor="lightgoldenrodyellow" autoCorrect={false} secureTextEntry={true}
                        maxLength={16} style={styles.text_center} onChangeText={(text) => this.setUserPassword(text) } />
                    {/*
                    <TouchableOpacity onPress={this._onPressButton}>
                        <Image source={require('./img/sg.png')} />
                    </TouchableOpacity>
                    */}
                    <View style={styles.button}>
                        <Text onPress={() => this.setPressButton()}>Login</Text>
                    </View>
                </Image>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'orange'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color: '#fff',
    },
    instructions: {
        textAlign: 'center',
        color: '#fff',
        marginBottom: 5,
    },
    text_center: {
        textAlign: 'center',
        color: '#fff'
    },
    button: {
        borderRadius: 8,
        height: 30,
        flexDirection: 'row',
        backgroundColor: 'orange',
        padding: 10,
        alignItems: 'center',
        justifyContent: 'center',
    }
});
